<!DOCTYPE html>
<html lang="en">
<!-- 代码参照地址：http://www.jianshu.com/p/8300a5ec6480 -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 使用rem进行webapp开发 -->
  <title>rem</title>
  <link rel="stylesheet" href="../node_modules/normalize.css/normalize.css" >
  <style>
    /* 移动端页面最小320px,最大768px,再大也就没有意义了 */

    html {
      font-size: 100px;
    }

    body {
      /* DISABLE DOUBLE-TAP-ZOOM */
      touch-action: none;
      -ms-touch-action: none !important;
    }

    .customContainer {
      width: 7.5rem;
      min-height: 100%;
      overflow-y: hidden;
      margin: 0 auto;
      font-size:0.26rem;
    }

    .btn{
      width: 1.2rem;
      height: .8rem;
      background-color: #eee;
      font-size:0.26rem;
    }
  </style>
  <script>
    //放在head中，避免页面闪烁
    (function (doc, win) {
      var _self = {},
        // 设计图宽度
        designWidth = 750,
        maxWidth = 768,
        minWidth = 320,
        maxRatio = (maxWidth / designWidth).toFixed(3),
        minRatio = (minWidth / designWidth).toFixed(3);

      _self.resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
      _self.Html = doc.getElementsByTagName("html")[0];
      _self.widthProportion = function () {
        var p = Number((doc.body && doc.body.clientWidth || _self.Html.offsetWidth) / designWidth).toFixed(3);
        return p > maxRatio ? maxRatio : p < minRatio ? minRatio : p;
      };
      _self.changePage = function () {
        _self.Html.setAttribute("style", "font-size:" + _self.widthProportion() * 100 + "px");
        _self.correctPx();
      };
      _self.correctPx = function () {
        var docEl = doc.documentElement;
        var clientWidth = docEl.clientWidth;
        if (!clientWidth || clientWidth > maxWidth) return;
        var div = doc.createElement('div');
        div.style.width = '1.4rem';
        div.style.height = '0';
        doc.body.appendChild(div);
        var ideal = 140 * clientWidth / designWidth;
        var rmd = (div.clientWidth / ideal);
        if (rmd > 1.2 || rmd < 0.8) {
          docEl.style.fontSize = 100 * (clientWidth / designWidth) / rmd + 'px';
          doc.body.removeChild(div);
        }
      };
      //不能在此处直接调用，因为当前文档有可能尚未加载完成
      //_self.changePage();
      if (!doc.addEventListener) return;
      win.addEventListener(_self.resizeEvt, _self.changePage, false);
      doc.addEventListener('DOMContentLoaded', _self.changePage, false);
    })(document, window);
  </script>
</head>

<body>
  <div class="customContainer">
    <p>哈哈哈，这是一个简单的测试模版好不好用的文字</p>
    <button class="btn" id="btnTest">按钮测试</button>
  </div>
  <script src="../node_modules/fastclick/lib/fastclick.js"></script>
  <script>
    //规避移动设备上click事件延迟  根据官方说明，该场景下，可以不用使用fastclick
    // window.addEventListener('load', function () {
    //   FastClick.attach(document.body);
    // }, false);

    //如果需要监听移动端的触摸事件，可以引入hammer.js
    document.getElementById('btnTest').addEventListener('click',function(){
      alert('点击事件被触发了');
    });
  </script>
</body>

</html>